<template>
  <!-- 主页 -->
  <div class="home-container">
    <!-- 分类栏 -->
    <!-- 要完成当分类变化下面的数据也跟着变化的一个情况 -->
    <!-- <div class="sort">
      <el-cascader-panel
        :show-all-levels="false"
        :options="options"
        v-model="category"
      ></el-cascader-panel>
    </div> -->
    <!-- 课程栏 -->
    <div v-if="courseArr.length != 0" class="courses">
      <el-row :gutter="20">
        <el-col v-for="item in courseArr" :key="item.course_id" :span="6">
          <courser-box
            @click.native="handleClick(item)"
            :course="item"
          ></courser-box>
        </el-col>
      </el-row>
    </div>
    <el-empty v-else description="暂无此类课程"></el-empty>

    <!-- 具有分类的课程列表 -->
    <category-course
      v-for="item in recommends"
      :key="item.title"
      :recommend="item"
      :openCourseDetail="handleClick"
    ></category-course>
    <el-drawer destroy-on-close :title="title" :visible.sync="drawer">
      <!-- 放课程的详细信息 -->
      <course-detail :course_id="course_id"></course-detail>
    </el-drawer>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
import CourserBox from "../components/CourserBox.vue";
import CourseDetail from "../components/CourseDetail.vue";
import CategoryCourse from "../components/CategoryCourse.vue";

export default {
  name: "Home",
  components: { CourserBox, CourseDetail, CategoryCourse },
  data() {
    return {
      curriculum: [],
      options: [],
      drawer: false,
      title: "",
      course_id: "",
      category: [],
      recommends: [],
      curriculumCopy: [],
    };
  },
  methods: {
    handleClick(e) {
      this.drawer = true;
      this.title = e.name;
      this.course_id = e.course_id;
    },
  },
  created() {
    this.axios.get(`${this.$reqPrefix}/getCourse`).then((res) => {
      this.curriculum = res.data.data;
      this.curriculumCopy = res.data.data;
    });
    // this.axios
    //   .get(`${this.$reqPrefix}/getCategory`)
    //   .then((res) => (this.options = res.data.data));
    // this.axios
    //   .get(`${this.$reqPrefix}/getRecommendCourse`)
    //   .then((res) => (this.recommends = res.data.data));
    // 订阅消息
    this.pubId = PubSub.subscribe("searchResult", (_, data) => {
      // a是消息名，b是真正的参数
      // console.log(this); // 当前的组件实例对象vc
      // console.log("有人发布了消息", data);
      if (data.length == 0) {
        this.curriculum = this.curriculumCopy;
      } else {
        this.curriculumCopy = this.curriculum;
        this.curriculum = data;
      }
    });
  },
  // 被销毁前取消订阅消息
  beforeDestroy() {
    PubSub.unsubscribe(this.pubId);
  },
  computed: {
    courseArr() {
      if (this.category.length === 0) {
        return this.curriculum;
      } else {
        let selectCategory = this.category[this.category.length - 1];
        //
        return this.curriculum.filter((e) =>
          e.category.includes(selectCategory)
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  padding: 20px;
  .sort {
    width: 95%;
    background-color: #fff;
    border-radius: 10px;
    margin: 30px auto;
  }
  .courses {
    width: 95%;
    margin: 0 auto;
    .el-row {
      .el-col {
        margin-bottom: 20px;
      }
    }
  }
}
</style>